import React from "react";
import { Divider } from "antd";
import style from "./goodsStandards.module.scss";
import useGoodsSelected from "@/hooks/useGoodsSelected";

// ['虾滑', '辣度', '蒜蓉']
const GoodsStandards = ({ goodsList }) => {
  const [goodsSelected, setGoodsSelected, goodsMapObj, goodsMapObjKeys] =
    useGoodsSelected(goodsList);

  const clickItem = (itemkey, goodsname, goodNums) => {
    if (!goodNums) return;
    if (goodsname === goodsSelected[itemkey]) {
      delete goodsSelected[itemkey];
      setGoodsSelected({ ...goodsSelected });
    } else setGoodsSelected({ ...goodsSelected, [itemkey]: goodsname });
  };

  return (
    <React.Fragment>
      {goodsMapObjKeys.map((itemkey) => {
        return (
          <div className={style.goodsItemContainer} key={itemkey}>
            <div className={style.goodsItemTitle}> {itemkey} </div>
            <div className={style.goodsItems}>
              {goodsMapObj[itemkey].map((item) => {
                return (
                  <div
                    className={[
                      style.goodsItem,
                      goodsSelected[itemkey] === item.goodsname
                        ? style.selectItem
                        : "",
                      item.goodNums ? "" : style.disableClass,
                    ].join(" ")}
                    key={itemkey + item.goodsname}
                    onClick={() =>
                      clickItem(itemkey, item.goodsname, item.goodNums)
                    }
                  >
                    {item.goodsname}
                  </div>
                );
              })}
            </div>
            <Divider />
          </div>
        );
      })}
    </React.Fragment>
  );
};

export default GoodsStandards;
